<template>
  <div class="box">
    <!-- 礼券 -->
    <i class="van-icon van-icon-arrow-left" @click="left"></i>

    <header>
      <img src="@/assets/image/gift.jpg" alt="" />
      <input type="text" value="请输入礼券码" />
      <button>兑换</button>
    </header>

    <ul class="gift">
      <li>
        <ul class="top">
          <li><b>1</b> 元</li>
          <li>
            <p>满减1</p>
            <p>满0元使用</p>
          </li>
          <li>
            <button>立即领取</button>
          </li>
        </ul>
        <div class="bottom">领取7天内有效</div>
      </li>

      <li>
        <ul class="top">
          <li><b>1</b> 元</li>
          <li>
            <p>满减1</p>
            <p>满0元使用</p>
          </li>
          <li>
            <button>立即领取</button>
          </li>
        </ul>
        <div class="bottom">领取7天内有效</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  mounted() {},
  methods: {
    left() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.van-icon {
  font-size: 0.4rem;
  position: fixed;
  top: 0.2rem;
  left: 0.2rem;
  z-index: 3;
}
.box {
  font-size: 0.24rem;
}
header {
  position: relative;
  img {
    width: 100%;
  }
  input {
    position: absolute;
    bottom: 0.7rem;
    left: 0.7rem;
    width: 4.583rem; //229.15
    height: 0.6458rem; //32.29
    border: 0.01rem solid #fa893d;
    color: #fa893d;
    font-size: 0.36rem;
    padding-left: 0.2rem;
    border-radius: 0.1rem;
    box-sizing: border-box;
  }
  button {
    position: absolute;
    bottom: 0.7rem;
    right: 0.7rem;
    color: white;
    background: #ee7c7b;
    height: 0.6458rem; //32.29
    border: 0;
    width: 1.1826rem; //59.13
    border-radius: 0.1rem;
  }
}

.gift {
  padding: 0.25rem;
  > li {
    position: relative;
    box-sizing: border-box;
    border-radius: 0.2rem;
    background: #ec7877;
    color: white;
    height: 2.423rem; //121.15
    margin-bottom: 0.2rem;
    .top {
      width: 100%;
      display: flex;
      padding: 0.5rem 0;
      justify-content: space-around;
      b {
        font-size: 0.5rem;
        font-weight: 400;
      }
      :nth-child(2) {
        :nth-child(1) {
          font-size: 0.29rem; //14.42
          margin-bottom: 0.2rem;
        }
      }
      button {
        background: #fce8e7;
        color: #d45656;
        border: 0;
        border-radius: 0.1rem;
        padding: 0.1rem 0.15rem;
      }
    }
    .bottom {
      background: #cc7773;
      border-radius: 0 0 0.2rem 0.2rem;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0.2rem 0;
      //   缩进
      text-indent: 1em;
    }
  }
}
</style>
